.ui-page-login,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.mui-content {
    height: 100%;
}

.mt-12{margin-top: 12px;}
.mb-100{margin-bottom: 100px;}
/* login.html  */
.login .area {
    margin: 20px auto 0px auto;
}

.login .mui-input-group {
    margin-top: 10px;
}

.login .mui-input-group:first-child {
    margin-top: 20px;
}

.login .mui-input-group label {
    color: #696969;
    text-align: center;
}


.login .mui-checkbox input[type=checkbox],
.login .mui-radio input[type=radio] {
    top: 6px;
}

.login .mui-content-padded {
    margin-top: 25px;
    color: #BCBCBC;
    text-align: -webkit-center;
}

.login .mui-btn {
    padding: 10px;
}

.login .link-area {
    display: block;
    margin-top: 25px;
    text-align: center;
}

.login .spliter {
    color: #bbb;
    padding: 0px 8px;
}

.login .oauth-area {
    position: absolute;
    bottom: 20px;
    left: 0px;
    text-align: center;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.login .oauth-area .oauth-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px 20px;
    /*-webkit-filter: grayscale(100%); */
    border: solid 1px #ddd;
    border-radius: 25px;
}

.login .oauth-area .oauth-btn:active {
    border: solid 1px #aaa;
}

.login .oauth-area .oauth-btn.disabled {
    background-color: #ddd;
}
.login .mui-input-group .mui-input-row:after{left:35px;right: 35px;}
.login .mui-btn.mui-btn-primary{border: 1px solid #1cd39b;background-color: #1cd39b;}


/* home.html */
.home .mui-bar-nav .mui-icon{
    font-size: 26px;
    color: #000000;
}
.home .oauth-area {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    padding: 0px;
    margin: 0px;
    display: block;
    z-index: 1000;
}

.home .oauth-area .mui-btn{
    border: 0;
    margin: 0;
    border-radius: 0;
    background-color: #768E98;
    line-height:2;
}

.home .mui-table-view , .home .mui-table-view:before , .home .mui-table-view:after , .home .mui-table-view-cell:after{background: none;}
.home .mui-table-view-cell{color: #FFFFFF;text-align:-webkit-center; vertical-align: middle;padding: 3px 15px;}
.home .mui-table-view-cell>.mui-btn{position: relative;top: 0;right: 0;-webkit-transform: translateY(0%);border: 0;width: 95%;height:168px;padding-top:56px;border-radius: 10px;color: #FFFFFF;}
.home .mui-table-view-cell>.mui-btn span{font-size: 34px;height: 36px;display: inline-block;line-height: 32px;padding-top: 12px;}
.home .mui-table-view-cell>.mui-btn.mui-btn-online-order{height: 62px;line-height: 50px;padding-top: 4px;}

.home .mui-table-view-cell>.mui-btn.mui-btn-online-order span{font-size: 18px;}

.mui-btn-custom-blue{background-color:#1cd39b;}
.mui-btn-custom-green{background-color:#70AA43;}
.mui-btn-custom-grey{background-color: #D2DADD;}
.mui-btn-custom-grey span{color: #58747F;}

.home .mui-btn i.mui-icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 46px;
    padding-left: 3px;
    font-size: 28px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.home .mui-btn.mui-btn-custom-blue i{color: #1cd39b;}
.home .mui-btn.mui-btn-custom-green i{color: #70AA43;}
.home .mui-btn.mui-btn-custom-grey i.mui-icon{background-color: #58747F;color: #FFFFFF;}
.home .mui-btn.mui-btn-offline-order i.mui-icon{padding-left: 0; padding-top: 2px;}
.home .mui-btn.mui-btn-online-order i.mui-icon{width: 28px; height: 28px;font-size: 20px;line-height: 30px;}


.payment .mui-input-row label{text-align: right;font-weight: bold;font-size: 18px;padding: 9px 15px;}
.payment .mui-table-view-cell{margin: 25px 0;}
.payment .mui-content-padded{text-align: -webkit-center}
.generate-QR-code{width: 75%;border-radius: 7px;border: 0;background-color: #1cd39b;color: #FFFFFF;font-size: 22px;}


.QR-code{background-color: #1cd39b;}
.QR-code a , .QR-code h1 ,.QR-code .mui-bar span{color: #FFFFFF;}
.QR-code div , .QR-code p ,.QR-code ul , .QR-code li {color: #2E2E2E;font-family: "微软雅黑";}
.QR-code .mui-bar{position: absolute;}
.QR-code .mui-bar span , .QR-code h1{font-size: 16px;font-family: "微软雅黑";}
.QR-code .mui-bar,
.QR-code .mui-content,
.QR-code .mui-table-view,
.QR-code .mui-table-view:before,
.QR-code .mui-table-view:after,
.QR-code .mui-table-view-cell:before,
.QR-code .mui-table-view-cell:after{
    background: none;
}
.QR-code .mui-bar-nav{box-shadow: none;}
.QR-code .mui-content{text-align:-webkit-center;}
.QR-code .mui-table-view{background-color: #FFFFFF;width:85%;text-align: initial;border-radius: 10px;}
.QR-code .mui-table-view-cell p{padding-left: 8%;min-height: 40px;line-height: 40px;font-size: 16px;font-weight: 700;}
.QR-code .order-number{font-size: 16px; font-weight:100;}
.QR-code .mui-table-view-cell p.payment-money , .QR-code .mui-table-view-cell p.QR-code-img{font-size: 36px;padding-left: 13%;}
.QR-code .mui-table-view-cell p.QR-code-tips{padding-left: 21%;}
.QR-code .mui-table-view-cell p img{max-width: 200px; max-height: 200px;}
.QR-code .mui-content-padded{margin-top: 45px;}
.QR-code .mui-content-padded p:first-child{color:#68CBEB;}
.QR-code .mui-content-padded p:last-child{color:#016388;}


.payment-prompt .mui-bar .mui-icon{font-size: 21px;}
.payment-prompt .mui-bar span , .QR-code h1{font-size: 16px;font-family: "微软雅黑";}
.payment-prompt .prompt-text{text-align: -webkit-center;line-height: 48px;}
.payment-prompt .prompt-text i{display: inline-block;width: 26px; height: 26px;border-radius: 50%;font-size: 28px;line-height: 26px;color: #FFFFFF;}
.payment-prompt .prompt-text span{font-size: 22px;}

.payment-prompt .prompt-text .icon-success{background-color: #1cd39b;}
.payment-prompt .prompt-text .icon-fail{background-color: #3B3B3B;}

.payment-prompt .prompt-text .text-success{color: #1cd39b;}
.payment-prompt .prompt-text .text-fail{color: #3B3B3B;}

.payment-prompt .mui-input-row label{width: 42%;padding: 11px 0;color: #3C3C3C;font-weight:bold;}
.payment-prompt .mui-input-row label~input{width: 58%;}

.payment-prompt .mui-table-view .mui-table-view-cell p{min-height: 35px;line-height: 35px;width: 100%;}
.payment-prompt .mui-table-view .mui-table-view-cell p label , .payment-prompt .mui-table-view .mui-table-view-cell p span{display: inline-block;}
.payment-prompt .mui-table-view .mui-table-view-cell p label {font-size: 18px;color: #7E7E7E;width: 35%;}
.payment-prompt .mui-table-view .mui-table-view-cell p span{width:63%;color: #000000;font-size: 18px;}
.payment-prompt .mui-table-view .mui-table-view-cell p span.payment-money{font-size: 30px;}

.payment-prompt .oauth-area {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: left;
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
    z-index: 1000;
}

.payment-prompt .mui-btn-block{width: 50%;display: inline-block;border-radius: 0;border: 0;float: left;margin: 0;}
.payment-prompt .mui-btn-blue{background-color: #1cd39b;border-right: 1px solid #FFFFFF;}
.payment-prompt .mui-btn-green{background-color: #5FA42D;}
.payment-prompt .mui-btn-block2{width: 100%;border-radius: 0;border: 0;min-height: 45px;line-height: 45px;font-size: 22px;}
.payment-prompt .mui-btn-orange{background-color: #FF6400;color: #FFFFFF;}
